<template>
  <view class="x-fixed">
    <view class="x-fixed__bottom">
      <slot></slot>
      <u-safe-bottom></u-safe-bottom>
    </view>
    <view
      class="u-tabbar__placeholder"
      :style="{
        height: placeholderHeight + 'px',
      }"
    ></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      placeholderHeight: 0,
    };
  },
  mounted() {
    this.setPlaceholderHeight();
  },
  methods: {
    // 设置用于防止塌陷元素的高度
    async setPlaceholderHeight() {
      // 延时一定时间
      await uni.$u.sleep(20);
      // #ifndef APP-NVUE
      this.$uGetRect('.x-fixed__bottom').then(({ height = 50 }) => {
        // 修复IOS safearea bottom 未填充高度
        this.placeholderHeight = height;
      });
      // #endif

      // #ifdef APP-NVUE
      dom.getComponentRect(this.$refs['x-fixed__bottom'], (res) => {
        const { size } = res;
        this.placeholderHeight = size.height;
      });
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
.x-fixed {
  .x-fixed__bottom {
    position: fixed;
    z-index: 999;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
    opacity: 1;
  }
}
</style>
